<script lang="ts">
export default {
  name: "xt-link",
};
</script>

<script setup lang="ts">
import { ElLink } from "element-plus";
import debounce from "lodash/debounce";
import Typings from "../../../typings";

interface Props extends /* @vue-ignore */ Partial<Typings.Link.props> {
  type?: Typings.Link.props["type"];
  underline?: Typings.Link.props["underline"];
  debounce?: number;
  debounceOptions?: Typings.Common.plainObj & {
    leading?: boolean;
    trailing?: boolean;
  };
}

const props = withDefaults(defineProps<Props>(), {
  type: "primary",
  underline: false,
  debounce: 300,
  debounceOptions: () => ({
    leading: true,
    trailing: false,
  }),
});

const emit = defineEmits(["click"]);

// 点击事件
const handleClick = debounce(
  function () {
    emit("click");
  },
  props.debounce,
  props.debounceOptions
);
</script>

<template>
  <el-link
    class="xt-link"
    :type="type"
    :underline="underline"
    @click="handleClick"
  >
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-link>
</template>

<style lang="scss">
@use "../../../scss/xt-link.scss";
</style>
